[Android] 意外と便利なGridLayout

#Android

宇都宮洋

2016.10.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

背景

Androidエンジニアのみなさん、GridLayout使ってますか？僕は使ったことがありません。
GridLayoutと言えば

こういうのだったり、他には電卓のようなものをイメージしていて
とりあえず仕事でもプライベートでも使うことはないかなと思ってました。

Androidweeklyを眺めていたら、海外の記事でGridLayoutの便利な使い方があったのでご紹介します。

紹介記事の要約

本家記事の要約ですが GridLayoutがリリースされてしばらく経つけど、GridLayoutを取り巻く環境ってこんな感じだよね
- そもそもほとんどのエンジニアがGridLayoutを知らない
- １部の人は知ってるけどなぜか使わない
- さらに１部のエンジニアだけが使っている
だからちょっと紹介するよ！
GridLayoutは何が美味しいの？
LinearLayoutはパフォーマンスに問題があるし
RelativeLayoutは位置をうまく合わせられないし、コンポーネントが意図せずはみ出たり、重くなったりするし、うまくコントロールできないよね。
でもGridLayoutを使えば解決できるよ Android Grid Layout

といった事を簡単なテーブルを表示するレイアウトを例に説明されています。

GridLayoutを使ってみる

というわけでGridLayoutを使って簡単に設定画面っぽいものを作ってみました。

レイアウトファイルは以下のようになっています。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="2"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">


    <TextView
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:gravity="center_vertical"
        android:text="無線とネットワーク" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_margin="16dp"
        android:background="@mipmap/network_wifi" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal|center_vertical"
        android:gravity="center_vertical"
        android:text="Wi-fi" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_margin="16dp"
        android:background="@mipmap/bluetooth" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal|center_vertical"
        android:gravity="center_vertical"
        android:text="Bluetooth" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_margin="16dp"
        android:background="@mipmap/data_usage" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal|center_vertical"
        android:gravity="center_vertical"
        android:text="データ使用量" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_margin="16dp"
        android:background="@mipmap/more_horizontal" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal|center_vertical"
        android:gravity="center_vertical"
        android:text="もっと見る" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:gravity="center_vertical"
        android:text="端末" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_margin="16dp"
        android:background="@mipmap/brightness_medium" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal|center_vertical"
        android:gravity="center_vertical"
        android:text="ディスプレイ" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_margin="16dp"
        android:background="@mipmap/notifications" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal|center_vertical"
        android:gravity="center_vertical"
        android:text="音と通知" />

</GridLayout>

こうすればLinearLayoutの中にLinearLayoutを定義するといった煩わしい事や、RelativeLayoutでうまくコンポーネントの位置を揃えられないといった事から解放されますね。